<template>
    <!-- 用户前台主页面 -->
    <el-container>
        <!-- 回到顶部 -->
        <el-backtop :bottom="100" :visibility-height="700">
            <div
            style="{
                height: 100%;
                width: 100%;
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                text-align: center;
                line-height: 40px;
                color: #1989fa;
            }"
            >
            UP
            </div>
        </el-backtop>
        <el-backtop :visibility-height="700"></el-backtop>
        <!-- 顶部 -->
        <el-header>
            <el-menu
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">

                <el-menu-item index="1" style="margin-left: 1%;">
                    <img src="@/assets/logo.png" alt="图标"
                        style="width: 30px;height: 30px;">
                        <span 
                        style="margin-left: 15px;
                        font-weight: 600;
                        color: #fff;
                        text-shadow: 3px 3px 3px rgb(5 5 5 / 50%);
                        font-size: 20px;"
                        >社区养老服务管理系统
                    </span>
                </el-menu-item>

                <el-menu-item index="2" style="margin-left: 64%;">我的活动</el-menu-item>

                <el-menu-item index="3" >健康档案</el-menu-item>

                <el-submenu index="4">
                    <template slot="title">
                        <el-avatar size="large" :src="userForm.photo_url"></el-avatar>
                    </template>
                    <el-menu-item index="4-1">我的信息</el-menu-item>
                    <el-menu-item index="4-2">退出账户
                    </el-menu-item>
                </el-submenu>

            </el-menu>
        </el-header>
        <!-- 内容区 -->
        <el-main>
            <el-row>
                <!-- 系统通知 -->
                <el-col :span="6">
                    <div class="system-div">
                        <!-- 系统通知卡片 -->
                        <el-card class="right-up-card" style="height: 500px;overflow: auto;width: 100%;">
                            <!-- 标题 -->
                            <div slot="header" class="clearfix">
                                <img src="@/assets/tongzhi.png" alt="通知" style="width: 130px;">
                            </div>
                            <!-- 具体内容 -->
                            <div v-for="item,index in noticeList" :key="index" class="text" style="margin-bottom: 9px;">
                                <div v-if="index === 0">
                                    <img src="@/assets/1.png" alt="" class="tongzhi-img">
                                    <a @click.prevent="clickSystemContext(item)" >{{ item.context.substr(0,21)+'...' }}</a>
                                    <el-divider></el-divider>
                                </div>
                                <div v-else-if="index === 1">
                                    <img src="@/assets/2.png" alt="" class="tongzhi-img">
                                    <a @click.prevent="clickSystemContext(item)">{{ item.context.substr(0,21)+'...' }}</a>
                                    <el-divider></el-divider>
                                </div>
                                <div v-else-if="index === 2">
                                    <img src="@/assets/3.png" alt="" class="tongzhi-img">
                                    <a @click.prevent="clickSystemContext(item)">{{ item.context.substr(0,21)+'...' }}</a>
                                    <el-divider></el-divider>
                                </div>
                                <div v-else style="">
                                    <span
                                        style="color: #ffb700;margin: 0 3px 0 4.5px;"
                                        >{{ index+1 }}
                                    </span>
                                    <a @click.prevent="clickSystemContext(item)">{{ item.context.substr(0,21)+'...' }}</a>
                                    <el-divider></el-divider>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>
                <!-- 轮播图 -->
                <el-col :span="18">
                    <el-carousel height="500px" direction="vertical" :autoplay="false">
                        <el-carousel-item v-for="item in photoList" :key="item">
                            <el-image
                            style="width: 100%; height: 100%"
                            :src="item"
                            fit="cover"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <!-- 左侧边栏 -->
                <el-col :span="4">
                    <div class="left-div">
                        
                            <Search/>
                            <MapContainer>
                            </MapContainer>

                        <img src="@/assets/left-user.png" alt="左边测图" style="width: 96%;margin-top: 15px;margin-bottom: 10px;">

                        <!-- 员工热榜 -->
                        <el-card style="width: 95.5%;">
                            <div slot="header">
                                <span >员工热榜(评分前五)</span>
                            </div>
                            <div v-for="item in employeeListOnFive" :key="item.id" style="display: flex;justify-content: left;margin-bottom: 15px;">
                                <el-avatar :size="60" :src="item.photo_url"></el-avatar>
                                <div>
                                    <div style="margin-top: 10px;margin-left: 14px;">{{ item.username }}</div>
                                    <el-rate
                                        style="margin-top: 10px;margin-left: 10px;"
                                        v-model="item.grade"
                                        disabled
                                        show-score
                                        text-color="#ff9900"
                                        score-template="{value}">
                                    </el-rate>
                                </div>
                            </div>
                        </el-card>
                        
                        <!-- 员工评价 -->
                        <el-card style="width: 95.5%; margin-top: 15px;">
                            <div slot="header">
                                <span>评价窗口</span>
                            </div>
                            <div>
                                <el-form :model="employeeComment">
                                    <el-form-item>
                                        <el-select v-model="employeeComment.id" placeholder="请选择员工">
                                        <el-option :label="item.username" :value="item.id" v-for="item in employeeList" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-rate
                                            v-model="employeeComment.value"
                                            show-score
                                            text-color="#ff9900"
                                            score-template="{value}">
                                        </el-rate>
                                    </el-form-item>
                                    <el-form-item label="打分依据">
                                        <el-input type="textarea" v-model="employeeComment.txt" placeholder="没有就填无"></el-input>
                                    </el-form-item>
                                    <el-form-item style="display: flex;justify-content: center;">
                                        <el-button disabled type="warning" v-if="isFlag === 1">对该员工已评价过!</el-button>
                                        <el-button disabled type="danger" v-if="isFlag === 3">对该员工不能评价!</el-button>
                                        <el-button type="primary" @click="onSubmit" v-if="isFlag === 2">提 交</el-button>
                                        <el-button @click="onRest" v-if="isFlag === 2">重 置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-card>


                    </div>
                </el-col>
                <!-- 中间内容 -->
                <el-col :span="16">
                    <div class="mid-div">
                        <!-- title -->
                        <h3
                            style="color: #5889ec;font-size: 23.4px;margin-top: 0;margin-bottom: 5px;"
                            >
                            活动浏览
                        </h3>
                        <!-- 活动内容 -->
                        <div v-for="item in tableData" :key="item.id">
                            <div style="display: flex;height: 200px;background-color: #fff;width: 99%;">
                                <!-- 图片 -->
                                <el-carousel height="200px" style="width: 250px;">
                                    <el-carousel-item v-for="n in [item.active_image_one,item.active_image_two]" :key="n">
                                        <el-image
                                        style="width: 100%; height: 100%"
                                        :src="n"
                                        fit="fill"></el-image>
                                    </el-carousel-item>
                                </el-carousel>
                                <!-- 内容 -->
                                <div style="height: 100%;width: 100%;">
                                    <div style="margin: 15px;font-size: 20px;height: 100px;"
                                        >
                                        <a @click.prevent=" clickActiveTitle(item)" class="title-a">
                                            {{ item.active_name }}
                                        </a>
                                        
                                </div>
                                    <div style="font-size: 14px;">
                                        <span style="margin-left: 8%;color: green;">开始: {{ item.start_time }}</span>
                                        <span style="margin-left: 8%;color: red;">结束: {{ item.end_time }}</span>
                                        <span style="margin-left: 8%;color: #409EFF;">负责人: {{ item.active_employee_name }}</span>
                                    </div>
                                    <!-- 按钮 -->
                                    <a class="context-a" @click.prevent="clickActiveComment(item)">
                                        <i class="el-icon-s-comment" si></i>
                                        <span>评论</span>
                                    </a>
                                </div>
                            </div>
                            <el-divider></el-divider>
                        </div>
                        <!-- 分页 -->
                        <el-pagination
                            style="margin-bottom: 20px;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 15, 20, 25]"
                            :page-size="currentPage"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="allActiveDate.length">
                        </el-pagination>
                    </div>
                </el-col>
                <!-- 右侧边栏 -->
                <el-col :span="4">
                    <div class="right-div">
                        <el-calendar v-model="calendarTime" style="margin-top: 36px;">
                        </el-calendar>
                        <div style="margin-top: 10px;margin-bottom: 10px;">
                            当前登录时间:
                        </div>
                        <el-time-picker
                            style="width: 100%;"
                            :disabled="true"
                            v-model="accurateTime"
                            :picker-options="{
                            selectableRange: '18:30:00 - 20:30:00'
                            }"
                            >
                        </el-time-picker>

                        <img src="@/assets/right-div.png" alt="右测图"
                           style="width: 100%;margin-top: 16px;">

                        <!-- 活动搜索框 -->
                        <el-card style="margin-top: 15px;">
                            <el-form :model="activeSearch">
                                <el-form-item>
                                    <el-input v-model="activeSearch.active_name" placeholder="活动名(可以模糊检索)"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-input v-model="activeSearch.active_address" placeholder="活动地址(可以模糊检索)"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="activeSearch.active_id" placeholder="活动负责人" style="width: 100%;">
                                    <el-option :label="item.username" :value="item.id" v-for="item in employeeList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-date-picker
                                        v-model="activeSearch.date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        style="width: 100%;">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item style="display: flex;justify-content: center;">
                                    <el-button type="primary" @click="submitForm">查 询</el-button>
                                    <el-button @click="resetForm">重 置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        
                    </div>
                </el-col>
            </el-row>
        </el-main>
        <!-- 底部 -->
        <el-footer>
            <div class="foot-div">
                <i style="margin-right: 5px;" class="el-icon-bangzhu"></i>
                <div style="margin-right: 40px;font-size: 25px;font-weight: 550;font-family: 'STXingkai';">基于SpringBoot的社区养老服务管理系统</div>
                <i style="margin-right: 5px;" class="el-icon-location-information"></i>
                <div style="margin-right: 30px;font-size: 23px;font-weight: 550;font-family: 'STXinwei';">武汉东湖学院</div>
                <i style="margin-right: 5px;" class="el-icon-user"></i>
                <div style="font-size: 23px;font-family: 'STKaiti';">习文建</div>
            </div>
        </el-footer>
        <!-- 系统公告对话框 -->
        <UserSystemItem/>
        <!-- 档案信息对话框 -->
        <UserHealthFiles/>
        <!-- 我的信息对话框 -->
        <UserMyInfo/>
        <!-- 用户信息修改对话框 -->
        <UserUpdateInfo/>
        <!-- 我的活动对话框 -->
        <UserActiveInfo/>
        <!-- 点击活动title显示活动详情对话框 -->
        <UserIndexActiveDetailTitle/>
    </el-container>
</template>

<script>    
    import MapContainer from './MapContainer.vue';
    import axios from 'axios';
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    import UserSystemItem from './UserSystemItem';
    import UserHealthFiles from './UserHealthFiles';
    import UserMyInfo from './UserMyInfo';
    import UserUpdateInfo from './UserUpdateInfo';
    import UserActiveInfo from './UserActiveDialogBox';
    import UserIndexActiveDetailTitle from './UserIndexActiveDetailForTitle';
    import Search from '@/components/Search.vue'; 
    export default {
        name:'UserIndex',
        components:{
            MapContainer,
            UserSystemItem,
            UserHealthFiles,
            UserMyInfo,
            UserUpdateInfo,
            UserActiveInfo,
            UserIndexActiveDetailTitle,
            Search
        },
        data() {
            return {
                // 轮播图(主页数据)
                photoList:[
                    'https://pension-system-wj.oss-cn-beijing.aliyuncs.com/images/yanglao1.png',
                    'https://pension-system-wj.oss-cn-beijing.aliyuncs.com/images/yanglao2.png',
                    'https://pension-system-wj.oss-cn-beijing.aliyuncs.com/images/yanglao3.png'
                ],
                // 系统通知
                noticeList:[],
                // 活动详情信息(用来展示的)
                tableData:[],
                // 所有的活动信息
                allActiveDate:[],
                // 所有员工信息(根据分数只取前5名的数据)
                employeeListOnFive:[],
                // 所有员工信息
                employeeList:[],
                // 用来记录当前一页是展示多少条数据,默认值是5
                currentPage: 10,
                // 员工评价窗口数据收集
                employeeComment:{
                    id:null,           // 员工id
                    value:0,           // grade
                    txt:''             // 信息
                },
                // 日历时间
                calendarTime:new Date(),
                // 当前时间
                accurateTime:new Date(),
                // 活动搜索框数据收集
                activeSearch:{
                    active_name:'',
                    active_address:'',
                    active_id:'',    // 活动负责人id
                    date:[]
                },
                // 当前登录用户的信息
                userForm:{},
                // 当前用户能否对选中的员工进行评价
                isFlag:2
            }
        },
        watch:{
            // 检查是否评价过该员工
            'employeeComment.id':{
                handler(newValue,oldValue){
                    if(newValue != null && newValue != oldValue){
                        const older_id = JSON.parse(sessionStorage.getItem('user')).id;
                        // 发送请求查看当前用户对选中的员工是否评价过
                        myAxios(
                            'http://localhost:8088/older/checkisappraise?employeeid='+this.employeeComment.id+'&olderid='+older_id,
                            'get',
                            null,
                            (data)=>{
                                if(data === 1){
                                    // 表示评价过
                                    this.isFlag = 1;
                                }else if(data === 2){
                                    // 表示没有评价过
                                    this.isFlag = 2;
                                }else if(data === 3){
                                    // 不能评价
                                    this.isFlag = 3;
                                }
                            }
                        );
                    }
                }
            }
        },
        methods:{
            // header点击事件
            handleSelect(key, keyPath) {
                if(key === '2'){
                    // 我的活动
                    this.$bus.$emit('userActiveInfo')
                }else if(key === '3'){
                    // 健康档案
                    this.$bus.$emit('userHealthFiles',true)
                }else if(key === '4-1'){
                    // 详细信息
                    this.$bus.$emit('userMyInfo')
                }else if(key === '4-2'){
                    // 退出
                    this.$bus.$emit('updateLoading',true);
                    // 1. 移除登录的信息
                    sessionStorage.removeItem('user');
                    // 2. 发送请求退出登录
                    axios({
                        url:'http://localhost:8088/home/exitlogin',
                        method:'get',
                        headers:{
                            Authorization:localStorage.getItem('token')
                        }
                    }).then(
                        response => {
                            if(response.data.result === "success"){
                                // 3. 清除sessionStorge里的user信息
                                sessionStorage.removeItem('user');
                                // 4. 切换路由
                                this.$router.push({path:'/'});
                            }else{
                                // 提示一下用户名或密码错误
                                this.$message.error(response.data.msg);
                                this.$bus.$emit('updateLoading',false);
                            }
                        },
                        error => {
                            if(error.response.status === 701){
                                window.location.replace('http://localhost:8080/');
                            }else{
                                console.log(error.message);
                            }
                        }
                    );
                }
            },
            // 系统通知卡片中点击每条通知
            clickSystemContext(notice){
                const obj = {
                    notice,
                    flag:true
                }
                this.$bus.$emit('userSystemItem',obj)
            },
            // 选择每页的展示条数
            handleSizeChange(val) {
                this.tableData = this.allActiveDate.slice(0,val);
                this.currentPage = val;
            },
            // 显示第几页的数据
            handleCurrentChange(val) {
                this.tableData = this.allActiveDate.slice((val-1)*this.currentPage,val*this.currentPage);
            },
            // 员工评价窗口:重置按钮
            onRest(){
                this.employeeComment={
                    id:null,           // 员工id
                    value:0,        // grade
                    txt:''          // 信息
                }
            },
            // 员工评价窗口:提交按钮
            onSubmit(){
                let older_id = JSON.parse(sessionStorage.getItem('user')).id;
                if(this.employeeComment.id === null || this.employeeComment.value === 0 || this.employeeComment.txt === ''){
                    // 提示一下
                    this.$message({
                        message: '请填写评价数据后再点击提交!',
                        type: 'warning'
                    });
                    return;
                }
                myAxios(
                    'http://localhost:8088/older/commentgrade',
                    'post',
                    Qs.stringify({
                        id:this.employeeComment.id,
                        value:this.employeeComment.value,
                        txt:this.employeeComment.txt,
                        older_id:older_id,
                    }),
                    (data)=>{
                        // 提示一下
                        this.$message({
                            message: '评价成功!',
                            type: 'success'
                        });
                        this.employeeComment={
                            id:null,           // 员工id
                            value:0,           // grade
                            txt:''             // 信息
                        }
                        // 获取所有的员工信息(根据grade排序，只取前5)
                        myAxios(
                            'http://localhost:8088/employee/getallemployeeinfoinperonandemployeedetail',
                            'get',
                            null,
                            (data)=>{
                                if(data.length === 0){
                                    this.$notify({
                                        title: '警告',
                                        message: '没有员工!',
                                        type: 'warning'
                                    });
                                }else{
                                    this.employeeListOnFive = data.slice(0,5);
                                    this.employeeList = data;
                                }
                            }
                        );
                    }
                )
            },
            // 点击活动title触发
            clickActiveTitle(item){  
                this.$bus.$emit('userIndexActiveDetailForTitle',item)
            },
            // 点击活动评论触发
            clickActiveComment(item){
                this.$router.push({
                    name:'userComment',
                    params:{
                        item
                    }
                })
            },
            // 活动查询提交
            submitForm(){
                if(this.activeSearch.active_name === ''    && 
                   this.activeSearch.active_id === ''      && 
                   this.activeSearch.active_address === '' &&
                   this.activeSearch.date.length != 2 ){
                    
                        // 提示一下
                        this.$message({
                            message: '请输入正确的查询信息!',
                            type: 'warning'
                        });
                    
                    return;
                   }
                myAxios(
                    'http://localhost:8088/older/getactivebyitemsuser',
                    'post',
                    Qs.stringify(this.activeSearch),
                    (data)=>{
                        if(data.length === 0){
                            // 提示一下
                            this.$message({
                                message: '没有活动信息!',
                                type: 'warning'
                            });
                        }else{
                            // 提示一下
                            this.$message({
                                message: '查询成功!',
                                type: 'success'
                            });
                            this.allActiveDate = data;
                            // 初始化前10条
                            this.tableData = this.allActiveDate.slice(0,10);
                        }
                    }
                )
            },
            // 活动查询重置
            resetForm(){
                this.activeSearch = {
                    active_name:'',
                    active_address:'',
                    active_id:'',    // 活动负责人id
                    date:[]
                };

                // 获取所有活动的信息
                myAxios(
                    'http://localhost:8088/admin/getallactiveinfo',
                    'get',
                    null,
                    (data)=>{
                        if(data.length === 0){
                            this.$notify({
                                title: '警告',
                                message: '没有活动!',
                                type: 'warning'
                            });
                        }else{
                            this.allActiveDate = data;
                            // 初始化前10条
                            this.tableData = this.allActiveDate.slice(0,10);
                        }
                    }
                );
            },
        },
        mounted(){
            // 获取当前用户的登录身份
            this.userForm = JSON.parse(sessionStorage.getItem('user'))
            // 系统通知部分
            myAxios(
                'http://localhost:8088/home/getnotice?isnotice=false',
                'get',
                null,
                (data)=>{
                    this.noticeList = data;
                }
            );
            // 创建定时器
            this.timeId = setInterval(()=>{
                this.accurateTime = new Date();
            },1000);

            // 获取所有活动的信息
            myAxios(
                'http://localhost:8088/admin/getallactiveinfo',
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        this.$notify({
                            title: '警告',
                            message: '没有活动!',
                            type: 'warning'
                        });
                    }else{
                        this.allActiveDate = data;
                        // 初始化前10条
                        this.tableData = this.allActiveDate.slice(0,10);
                    }
                }
            );

            // 获取所有的员工信息(根据grade排序，只取前5)
            myAxios(
                'http://localhost:8088/employee/getallemployeeinfoinperonandemployeedetail',
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        this.$notify({
                            title: '警告',
                            message: '没有员工!',
                            type: 'warning'
                        });
                    }else{
                        this.employeeListOnFive = data.slice(0,5);
                        this.employeeList = data;
                    }
                }
            );
        },
        beforeDestroy(){
            // 销毁定时器
            if (this.timeId) {
                clearInterval(this.timeId);
            }
        }
    }
</script>

<style lang="less" scoped>
  .el-header,.el-footer{
    padding: 0 0px;
  }
  .el-main {
    background-color: #E9EEF3;
    padding: 1px 20px 0 20px
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  /deep/ .el-divider--horizontal {
    margin: 12px 0;
}
  .left-div{
    width: 100%;
  }
  .mid-div{
    width: 100%;
    .context-a{
        display: block ;
        margin-top: 15px;
        margin-left: 90%;
        color: #99a9bf;
    }
    .context-a:hover,.title-a:hover{
        color: #409EFF;
        cursor: pointer;
    }
  }
  .right-div{
    width: 100%;
    /deep/  .el-calendar-table .el-calendar-day{
        width: 33px;
        height: 40px;
    }
    /deep/  .el-calendar__title{
        font-size: 14px;
        margin-bottom: 5px;
    }
    /deep/ .el-calendar__header {
        display: block;
    }
  }
  .system-div{
    width: 100%;
    display: flex;
    justify-content: center;

    .right-up-card{
        background-color: rgba(255, 255, 255, 0.931);
        .clearfix{
            span{
                font-size: 20px;
            }
        }
        .text{
            font-size: 15px;
            color: #333333;
            font-family: 'PingFang SC';
            .tongzhi-img{
                height: 16px;
                width: 16px;
                margin-right: 3.5px;
            }
            a{
                text-decoration: none;
                color: #333333;
                font-family: 'PingFang SC';
            }
            a:hover{
                color: #409EFF;
                cursor: pointer;
            }
        }
    }
  }
  .foot-div{
    width: 100%;
    height: 130px;
    background-color: rgb(123, 119, 123);
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>